<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :addTodo="addTodo" />
      <TodoList
        :todos="todos"
        :updateTodoIsDone="updateTodoIsDone"
        :delTodo="delTodo"
      />
      <TodoFooter
        :isDoneCount="isDoneCount"
        :total="todos.length"
        :updateAllTodoIsDone="updateAllTodoIsDone"
        :delIsDoneTodo="delIsDoneTodo"
      />
    </div>
  </div>
</template>

<script>
import TodoHeader from "./views/TodoHeader";
import TodoList from "./views/TodoList";
import TodoFooter from "./views/TodoFooter";

export default {
  name: "App",
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      todos: [
        { id: 1, name: "吃饭", isDone: false },
        { id: 2, name: "睡觉", isDone: true },
        { id: 3, name: "敲代码", isDone: false },
      ],
    };
  },
  methods: {
    addTodo(name) {
      this.todos.unshift({
        id: Date.now(),
        name,
        isDone: false,
      });
    },
    updateTodoIsDone(id) {
      /*  
        map/filter/reduce/find/findIndex/some/every
        push pop unshift shift splice concat slice

        find 找到的值 todo
             没有找到 undefined
      */
      const todo = this.todos.find((todo) => todo.id === id);
      // 直接操作数据
      todo.isDone = !todo.isDone;
    },
    delTodo(id) {
      this.todos = this.todos.filter((todo) => todo.id !== id);
    },
    updateAllTodoIsDone(isDone) {
      this.todos.forEach((todo) => (todo.isDone = isDone));
    },
    delIsDoneTodo() {
      this.todos = this.todos.filter((todo) => !todo.isDone);
    },
  },
  computed: {
    // 已完成数量
    isDoneCount() {
      // 计算数量、总价
      return this.todos.reduce((prev, curr) => prev + (curr.isDone ? 1 : 0), 0);
    },
  },
};
</script>

<style>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>